import { useState } from 'react';
import { Bar, Pie } from 'react-chartjs-2';
import 'chart.js/auto';

/*静态数据*/
const Dashboard = () => {
    const [stats] = useState({
        categories: {
            bug: 30,
            feature: 50,
            general: 20,
        },
        sentiment: {
            positive: 60,
            neutral: 30,
            negative: 10,
        },
    });

    const categoryData = {
        labels: ['Bug报告', '功能请求', '一般意见'],
        datasets: [
            {
                label: '反馈类别',
                data: [stats.categories.bug, stats.categories.feature, stats.categories.general],
                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
            },
        ],
    };

    const sentimentData = {
        labels: ['正面', '中性', '负面'],
        datasets: [
            {
                label: '情感分析',
                data: [stats.sentiment.positive, stats.sentiment.neutral, stats.sentiment.negative],
                backgroundColor: ['#4CAF50', '#FFC107', '#F44336'],
            },
        ],
    };

    return (
        <div className="p-6 bg-white rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-4">反馈统计仪表盘</h2>
            <div className="mb-6">
                <Bar data={categoryData} />
            </div>
            <div>
                <Pie data={sentimentData} />
            </div>
        </div>
    );
};

export default Dashboard;

/*有后端*/
/*
* import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Bar, Pie } from 'react-chartjs-2';
import 'chart.js/auto';

const Dashboard = () => {
  const [stats, setStats] = useState(null);

  useEffect(() => {
    const fetchStats = async () => {
      const response = await axios.get('/api/feedback-stats');
      setStats(response.data);
    };
    fetchStats();
  }, []);

  if (!stats) {
    return <div>加载中...</div>;
  }

  const categoryData = {
    labels: ['Bug报告', '功能请求', '一般意见'],
    datasets: [
      {
        label: '反馈类别',
        data: [stats.categories.bug, stats.categories.feature, stats.categories.general],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      },
    ],
  };

  const sentimentData = {
    labels: ['正面', '中性', '负面'],
    datasets: [
      {
        label: '情感分析',
        data: [stats.sentiment.positive, stats.sentiment.neutral, stats.sentiment.negative],
        backgroundColor: ['#4CAF50', '#FFC107', '#F44336'],
      },
    ],
  };

  return (
    <div className="p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-4">反馈统计仪表盘</h2>
      <div className="mb-6">
        <Bar data={categoryData} />
      </div>
      <div>
        <Pie data={sentimentData} />
      </div>
    </div>
  );
};

export default Dashboard;
* */